<template>
  <div class="nav-menu">
    <div class="block">
      <el-image
        style="width: 150px;height: 75px;padding: 6px 0;"
        :src="logo"
        fit="cover"
      ></el-image>
    </div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :router="true"
    >
      <div v-for="(navItem, navIdx) in navObj" :key="navIdx">
        <el-submenu :index="navItem.index" v-if="navItem.subMenu">
          <template slot="title">
            <i :class="navItem.icon"></i>
            <span>{{ navItem.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(subItem, subIdx) in navItem.subMenu"
              :key="subIdx"
              :index="subItem.index"
              >{{ subItem.title }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item v-else :index="navItem.index">
          <i :class="navItem.icon"></i>
          <span slot="title">{{ navItem.title }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>
<script>
import Menu from "@/config/menu.js";
export default {
  name: "BNavMenu",
  data() {
    return {
      navObj: Menu,
      logo: require("@/assets/logo.png")
    };
  }
};
</script>
<style scoped>
.nav-menu .block {
  /* background: #41b883; */
  /* background: #35495e; */
  background: #434a50;
}
.el-image {
  display: block;
  margin: 0 auto;
}
.el-menu {
  border: none;
}
</style>
